<script setup>
import { reactive, computed } from 'vue'

const info = reactive({
    email: '',
    code: '',
    newEmail:''
})

// 方法：动态判断标题和邮箱信息
const bindTitle = computed(() => {
    return info.email ? '已绑定邮箱' : '未绑定邮箱，可在此进行邮箱绑定（可选）'
})

const bindEmail = computed(() => {
    return info.email ? info.email : '当前邮箱为空'
})
</script>

<template>
    <div class="pageWrapper">
        <!-- 通过计算属性显示绑定状态 -->
        <p class="bindtitle">{{ bindTitle }}</p>
        <p class="bindemail">{{ bindEmail }}</p>
        <p class="bindcontent">邮箱是您身份的重要凭证。当账号发生异常时，将会通过该邮箱第一时间通知到您</p>
        
        <!-- 绑定 email 和 code 到输入框 -->
        <el-input v-model="info.newEmail" style="width:325px;height:40px;margin-top:30px" placeholder="请输入要绑定的邮箱" />
        
        <div class="content-element">
            <el-input v-model="info.code" style="width:200px;height:40px" placeholder="邮箱验证码" />
            <button class="bindbtn">发送验证码</button> 
        </div>
        
        <button class="bindbtn-sub">确认</button>
    </div>
</template>

<style scoped>
.pageWrapper {
    width: 95%;
    background-color: #fff;
    height: calc(100vh - 120px);
    margin: 0 auto;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 50px;
}
.bindtitle, .bindcontent {
    color: #8c939d;
}
.bindemail {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
}
.pageWrapper .bindmobile {
    font-size: 30px;
    padding-top: 8px;
}
.pageWrapper .bindcontent {
    color: #8c939d;
    margin-top: 10px;
}
.content-element {
    height: 50px;
    margin-top: 10px;
}
.bindbtn {
    width: 120px;
    height: 40px;
    background-color: #2E58FF;
    color: #fff;
    margin-left: 5px;
    border: #fff;
    cursor: pointer;
    border-radius: 5px;
}
.bindbtn-sub {
    width: 330px;
    height: 40px;
    background-color: #2E58FF;
    color: #fff;
    margin-left: 5px;
    border: #fff;
    cursor: pointer;
    border-radius: 5px;
}
</style>
